<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jsx语法规则</title>
    <!-- 引入react库 -->
    <script src="./node_modules/react/umd/react.development.js"></script>
    <!-- 引入react-dom 支持react操作dom -->
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    <!-- 用于将jsx转换成浏览器可识别的代码 -->
    <script src="./node_modules/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script type="text/babel">
    // JSX语法规则：
    // 1、定义虚拟Dom时，不用写引号。
    // 2、标签中混入JS表达式是要用{}
    // 3、样式的类名指定不用用class，要用className
    // 4、内联样式，要用style={{key：value}}的形式去写
    // 5、只有一个根标签
    // 6、标签必须闭合
    // 7、标签首字母：
    // (1)若小写字母开头,则将该标签转为htm中同名元素,若htm中无该标签对应的同名元素,则报错；
    // (2)若大写字母开头, react就去演染对应的组件,若组件没有定义,则报错。
    // 8、注释信息要写在{}中

    const str = '白龙马';
    let list = (
      <>
        <ol className="ol">
          <li>孙悟空</li>
          <li>猪八戒</li>
          <li>沙和尚</li>
          <li>唐三藏</li>
          <li>{str}</li>
        </ol>
        {/*
          注释信息
 d       */}
      </>
    );

    let root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(list);
  </script>
</html>
